/*
 * Created: 2022-08-26 20:34:55
 * Author : 涛涛涛
 */

import React, { FC, useContext, useEffect } from 'react';
import { View, Text, Image } from '@tarojs/components';
import { styled } from 'linaria/react';
import { MyCss, useClassName, useDomHeight } from '@/utils/index';
import { HomeContext } from '../RootPageComponentContext';
import Taro, { useRouter } from '@tarojs/taro';
import NavContent from './NavContent/NavContent';
export interface IProps extends ICompProps {}
MyHeadNav.defaultProps = {} as Partial<IProps>;
function MyHeadNav(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('MyHeadNav', className);
    const {
        rootLayoutState: { headNavHeight, isNavExpand },
    } = useContext(HomeContext);
    return (
        <RootView
            className={localClassName}
            style={{ ...style, height: headNavHeight + 'px', boxShadow: MyCss.cardBoxShadow }}>
            <View className="ocupied" style={{ height: isNavExpand ? headNavHeight / 8 + 'px' : '0px' }}></View>
            <NavContent
                style={{ height: isNavExpand ? (headNavHeight / 8) * 7 + 'px' : headNavHeight + 'px' }}></NavContent>
        </RootView>
    );
}
export default React.memo(MyHeadNav as FC<IProps>);
const RootView = styled(View)`
    &.MyHeadNav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        transition: height 0.25s;
        z-index: 9;
        background-color: #fff;
        .ocupied,
        .content {
            transition: height 0.25s;
        }
    }
`;
